const table = $('table')
const cover = $('.cover')
//导航栏的伸缩
const navbtns = $('.firstnav')
const navList = $('.nav>nav>ul>li>ul')
navList.each((idnex, item) => {
    if (idnex != 0) {
        $(item).slideUp()
    }
})
navbtns.click((e) => {
    $(e.target).siblings().children().stop().slideToggle()
    $(e.target).children('i').eq(1).toggleClass('nav-icon-change')
})

let data = { "msg": "操作成功", "code": 200, "list": [{ "id": 1, "pid": 0, "title": "系统设置", "icon": "el-icon-setting", "type": 1, "url": "", "status": 1, "children": [{ "id": 2, "pid": 1, "title": "菜单管理", "icon": "", "type": 2, "url": "/menu", "status": 1 }, { "id": 3, "pid": 1, "title": "角色管理", "icon": "", "type": 2, "url": "/role", "status": 1 }, { "id": 7, "pid": 1, "title": "管理员管理", "icon": "", "type": 2, "url": "/user", "status": 1 }, { "id": 93, "pid": 1, "title": "qq111", "icon": "", "type": 2, "url": "", "status": 1 }, { "id": 94, "pid": 1, "title": "wechat", "icon": "123", "type": 1, "url": "", "status": 1 }] }, { "id": 8, "pid": 0, "title": "商城管理", "icon": "el-icon-s-goods", "type": 1, "url": "", "status": 1, "children": [{ "id": 9, "pid": 8, "title": "商品分类", "icon": "", "type": 2, "url": "/category", "status": 1 }, { "id": 10, "pid": 8, "title": "商品规格", "icon": "", "type": 2, "url": "/specs", "status": 1 }, { "id": 11, "pid": 8, "title": "商品管理", "icon": "", "type": 2, "url": "/goods", "status": 1 }, { "id": 12, "pid": 8, "title": "会员管理", "icon": "", "type": 2, "url": "/member", "status": 1 }, { "id": 14, "pid": 8, "title": "活动管理", "icon": "", "type": 2, "url": "/banner", "status": 1 }, { "id": 15, "pid": 8, "title": "秒杀活动", "icon": "", "type": 2, "url": "/seckill", "status": 1 }, { "id": 19, "pid": 8, "title": "订单管理", "icon": "", "type": 2, "url": "/orders", "status": 1 }] }] };

// 数据展示至页面
function createView() {
    let datalist = data.list
    const tr = `
    <tr>
        <td>ID</td>
        <td>名称</td>
        <td>图标</td>
        <td>地址</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    `
    table.append(tr)
    for (let i in datalist) {
        let icon = null
        datalist[i].icon == '' ? icon = '' : icon = `<i class="table-icon table-icon1" style="background-image:url('../icon/${datalist[i].icon}.png')"></i>`
        const tr = `
        <tr>
            <td style="justify-content: flex-start;">
                <i class="table-icon"></i>
                ${datalist[i].id}
            </td>
            <td>${datalist[i].title}</td>
            <td>${icon}</td>
            <td></td>
            <td>
                <div>${datalist[i].status == 1 ? '正常' : '禁用'}</div>
            </td>
            <td>
                <button class="table-icon-setting"></button>
                <button class="table-icon-delete"></button>
            </td>
        </tr>
        `
        table.append(tr)
        for (let item of datalist[i].children) {
            const tr = `
            <tr>
                <td>${item.id}</td>
                <td>${item.title}</td>
                <td></td>
                <td>${item.url}</td>
                <td>
                    <div>${item.status == 1 ? '正常' : '禁用'}</div>
                </td>
                <td>
                    <button class="table-icon-setting"></button>
                    <button class="table-icon-delete"></button>
                </td>
            </tr>
            `
            table.append(tr)
        }
    }
}
createView()
cover.hide()

// 遮罩层及弹窗
let add = $('.add>button')
let close = $('.cover-content-head-icon')
let inp1 = $('.cover-content-body>div:eq(0)>select')
let inp2 = $('.cover-content-body>div:eq(1)>input')
let inp3 = $('.cover-content-body>div:eq(2)>input')
let inp4 = $('.cover-content-body>div:eq(3)>input')
let inp5 = $('.cover-content-body>div:eq(4)>input')
let err1 = inp2.siblings('span').children('.cover-content-body-err1')
let err2 = inp2.siblings('.cover-content-body-err2')
let setbtn = null
let delbtn = null
let cancel = $('.cover-content-foot>button:eq(0)')
let submit = $('.cover-content-foot>button:eq(1)')
let icon = $('.icon')
let url = $('.url')
let name = $($('.cover-content-head>p')[0])
let curid = 0
let num_max = 0
inp2.attr('id', '')
err1.hide()
err2.hide()

// 检测标题是否为空
inp2.focus(function () {
    if (inp2.val() != '') {
        inp2.attr('id', '')
        err1.hide()
        err2.hide()
    }
})
inp2.blur(function () {
    inp2.attr('id', '')
    err1.hide()
    err2.hide()
    if (inp2.val() == '') {
        inp2.attr('id', 'cover-content-body-err')
        err1.show()
        err2.show()
    }
})


// 关闭遮罩层及弹窗
function Close() {
    cover.hide()
    name.text('新增')
    inp1.attr('disabled', false)
    inp1.val('顶级目录')
    inp2.val('')
    inp3.val('')
    inp5.attr('disabled', false)
    let curinp5 = document.querySelector('.cover-content-body>div:nth-of-type(5)>input:nth-of-type(1)')
    let curinp6 = document.querySelector('.cover-content-body>div:nth-of-type(6)>input:nth-of-type(1)')
    curinp5.checked = true
    curinp6.checked = true
}
close.click(Close)
cancel.click(Close)

// 新增或修改确认
function AddOrChange() {
    let curinp5 = $('.cover-content-body>div:eq(4)>input:checked')
    let curinp6 = $('.cover-content-body>div:eq(5)>input:checked')
    let menu = inp1.val()
    let title = inp2.val()
    if (title == '') return
    let icon = inp3.val()
    let type = curinp5.val()
    let status = curinp6.val()
    //若disabled值为undefind则为新增
    let obj = {}
    console.log(inp1.attr('disabled'));
    if (!inp1.attr('disabled')) {
        if (menu == '顶级目录') {
            obj = {
                "id": num_max + 1,
                "pid": 0,
                "title": title,
                "icon": icon,
                "type": type == '目录' ? 1 : 2,
                "url": "",
                "status": status == '正常' ? 1 : 0,
                "children": []
            }
            data.list.push(obj)
        } else {
            for (let item of data.list) {
                if (menu == item['title']) {
                    obj = {
                        "id": num_max,
                        "pid": 0,
                        "title": title,
                        "icon": "",
                        "type": type == '目录' ? 1 : 2,
                        "url": "",
                        "status": status == '正常' ? 1 : 0,
                        "children": []
                    }
                    item.children.push(obj)
                    break
                }
            }
        }
    } else if (inp1.attr('disabled')) {
        let url = inp4.val()
        if (menu == '顶级目录') {
            for (let i in data.list) {
                if (data.list[i].id == curid) {
                    data.list[i].title == title
                    data.list[i].url = url
                    data.list[i].status = status == '正常' ? 1 : 0
                    break
                }
            }
        } else {
            for (let i in data.list) {
                if (menu != data.list[i].title) {
                    continue
                }
                for (let j in data.list[i].children) {
                    if (data.list[i].children[j].id == curid) {
                        data.list[i].children[j].title = title
                        data.list[i].children[j].url = url
                        data.list[i].children[j].status = status == '正常' ? 1 : 0
                        break;
                    }
                }
            }
        }
    }
    table.html("")
    createView()
    setting()
    del()
    Close()
}
submit.click(AddOrChange)

// 新增
add.click(function () {
    // 获取当前id最大值
    $.each(data.list, function (i, item) {
        num_max < item.id ? num_max = item.id : num_max = num_max
        $.each(item.children, function (j, item) {
            num_max < item.id ? num_max = item.id : num_max = num_max
        })
    })
    curid = num_max
    icon.show()
    url.hide()
    cover.show()
})


/**
 * 修改
 */
function Set(...data) {
    inp1.attr('disabled', true)
    inp1.val(data[1] || '顶级目录')
    inp2.val(data[0].title)
    inp4.val(data[0].url)
    inp5.attr('disabled', true)
    data[0].type == 1 ? document.querySelector('.cover-content-body>div:nth-of-type(5)>input:nth-of-type(1)').checked = true : document.querySelector('.cover-content-body>div:nth-of-type(5)>input:nth-of-type(2)').checked = true
    data[0].status == 1 ? document.querySelector('.cover-content-body>div:nth-of-type(6)>input:nth-of-type(1)').checked = true : document.querySelector('.cover-content-body>div:nth-of-type(6)>input:nth-of-type(2)').checked = true
    name.text('修改')
    url.show()
    icon.hide()
    cover.show()
}
function setting() {
    setbtn = document.querySelectorAll('.table-icon-setting')
    for (let ele of setbtn) {
        ele.onclick = function (e) {
            curid = Number($(e.target).parent().siblings().eq(0).text())
            $.each(data.list, function (i, item) {
                let menu = item.title
                if (curid == item.id) Set(item)
                $.each(item.children, function (j, item) {
                    if (curid == item.id) Set(item, menu)
                })
            })
        }
    }
}
setting()

// 删除弹窗
const delCover = $('.del-cover')
const delCancel = $('.del-cover-content-foot>button:eq(0)')
const delSubmit = document.querySelector('.del-cover-content-foot>button:nth-of-type(2)')
let curtr = null
delCover.hide()

// 删除
function Del(curtr) {
    for (let i in data.list) {
        if (curtr == data.list[i].id) {
            data.list.splice(i, 1)
            break
        } else {
            for (let j in data.list[i].children) {
                if (curtr == data.list[i].children[j].id) {
                    data.list[i].children.splice(j, 1)
                    break
                }
            }
        }
    }
    console.log(data.list);
    table.html("")
    createView()
    setting()
    del()
    delCover.hide()
}

function del() {
    delbtn = document.querySelectorAll('.table-icon-delete')
    for (let ele of delbtn) {
        ele.onclick = function (e) {
            curtr = Number($(e.target).parent().siblings().eq(0).text())
            delCover.show()
        }
    }
    delSubmit.onclick = () => {
        Del(curtr)
    }
    close.click(() => delCover.hide())
    delCancel.click(() => delCover.hide())
}
del()